<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :before-close="handleClose"
      :fullscreen="true"
      :modal-append-to-body="false"
      width="90%"
      >
      <div class="content">
        <el-form label-position="top" label-width="80px" :model="formLabelAlign" :rules="rules" ref="ruleForm" size="mini">
          <el-form-item label="航段起运港:" prop="departure">
            <el-select
              v-model="formLabelAlign.departure"
              filterable
              ref="agentSelect"
              :popper-append-to-body="false"
              placeholder="请选择"
              @hook:mounted="cancalReadOnly"
              @visible-change="cancalReadOnly"
              >
              <el-option v-for="(item,index) in transData" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="航段目的港:" prop="destination">
             <el-select
              v-model="formLabelAlign.destination"
              filterable
              :popper-append-to-body="false"
              ref="agent1Select"
              placeholder="请选择">
              <el-option v-for="(item,index) in transData" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="运输方式:" prop="transportWay">
            <el-select
              v-model="formLabelAlign.transportWay"
              filterable
              :popper-append-to-body="false"
              ref="agent2Select"
              placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.options" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="运输工具:" prop="transportTool">
            <el-input v-model="formLabelAlign.transportTool" @focus="handleFocus"></el-input>
          </el-form-item>
          <el-form-item label="计划离开时间:" class="time">
            <el-button plain @click="handleShowTime('sta',times.sta)">{{times.sta === '' ? '请选择计划离开时间':times.sta}}</el-button>
          </el-form-item>
          <el-form-item label="计划抵达时间:" class="time">
            <el-button plain @click="handleShowTime('std',times.std)">{{times.std === '' ? '请选择计划抵达时间':times.std}}</el-button>
          </el-form-item>
          <el-form-item label="实际离开时间:" class="time">
            <el-button plain @click="handleShowTime('eta',times.eta)">{{times.eta === '' ? '请选择实际离开时间':times.eta}}</el-button>
          </el-form-item>
          <el-form-item label="实际抵达时间:" class="time">
            <el-button plain @click="handleShowTime('etd',times.etd)">{{times.etd === '' ? '请选择实际抵达时间':times.etd}}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleOk">提 交</el-button>
      </span>
      <div class="select-time">
        <van-datetime-picker
          v-if="showTime"
          v-model="currentDate"
          type="datetime"
          :title="timeTitle"
          @cancel="handleCancel"
          @confirm="handleTime"
        />
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { transportType } from '../../../assets/js/export'
import { formatTime } from '@/assets/js/common'
import { $export } from "@/api/export"
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    title: {
      type: String,
      default() {
        return ''
      }
    },
    record: {
      type: Object,
      default() {
        return {}
      }
    },
    exportObj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      dialogVisible: true,
      transData: [], // 运输目的数据
      formLabelAlign: {
        departure: '', // 起运
        destination: '', // 目的
        transportTool: '' , // 运输工具
        transportWay: '' // 运输方式
      },
      options: transportType,
      currentDate: new Date(),
      showTime: false, // 控制时间选择器显示与隐藏
      times: {
        sta: '',
        std: '',
        eta: '',
        etd: ''
      }, // 所有的时间
      timeName: '', // 当前被选的时间名称
      timeTitle: '', // 显示正在选择的时间名称
      rules: {
        departure: [
          { required: true, message: '请输入起运港', trigger: 'blur' }
        ],
        destination: [
          { required: true, message: '请输入目的港', trigger: 'blur' }
        ],
        transportTool: [
          { required: true, message: '请输入运输工具', trigger: 'blur' }
        ],
        transportWay: [
          { required: true, message: '请选择运输方式', trigger: 'change' }
        ]
      }, // 验证规则
    }
  },
  methods: {
    // 关闭
    handleClose() {
      this.$emit('handleClose')
    },
    // 提交
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if(this.times.sta === '' || this.times.std === '') return this.$msg.fail('计划时间不能为空')
        if (valid) {
          const obj = JSON.parse(JSON.stringify(Object.assign(this.formLabelAlign, this.times)))
          obj.mainWaybillNumber = this.record.mainWaybillNumber === undefined ? null : this.record.mainWaybillNumber
          obj.transportId = this.record.tid
          obj.sta = obj.sta + ':00'
          obj.std = obj.std + ':00'
          if(obj.eta !== '') obj.eta = obj.eta + ':00'
          if(obj.etd !== '') obj.etd = obj.etd + ':00'
          obj.transportWay = `${obj.transportWay}`
          obj.purchaser = this.exportObj.purchaser
          if (Object.keys(this.item).length !== 0) {
            obj.fid = this.item.fid
            if(obj.transportWay.length !== 1) {
              this.options.forEach(item => {
                if(item.options == obj.transportWay) {
                  obj.transportWay = `${item.value}`
                }
              })
            }
            $export.modify(obj)
                  .then(res => {
                    if(res.status === 200) {
                      this.$emit('handleClose',1)
                      this.$msg.success(res.msg || res.message || '修改成功')
                    }
                    else {
                      this.$msg.fail(res.msg || res.message || '新增失败')
                    }
                  })
                  .catch(err => this.$msg.fail(err.msg || err.message || '网络错误,请稍后再试'))
          }
          else {
            // 这是新增
            $export.save(obj)
                  .then(res => {
                    if(res.status === 200) {
                      this.$emit('handleClose',1)
                      this.$msg.success(res.msg || res.message || '新增成功')
                    }
                    else {
                      this.$msg.fail(res.msg || res.message || '新增失败')
                    }
                  })
                  .catch(err => this.$msg.fail(err.msg || err.message || '网络错误,请稍后再试'))
          }
        } else {
          return false
        }
      })
    },
    // 点击取消
    handleCancel() {
      this.showTime = false
    },
    // 点击时间确定按钮
    handleTime(value) {
      const time = formatTime(value)
      this.times[this.timeName] = time
      this.showTime = false
    },
    // 显示时间选择器
    handleShowTime(str,time) {
      if (time !== '') {
        this.currentDate = new Date(time)
      } else {
        this.currentDate = new Date()
      }
      this.timeName = str
      switch(str) {
        case 'sta':
          this.timeTitle = '计划离开时间'
          break;
        case 'std':
          this.timeTitle = '计划抵达时间'
          break;
        case 'eta':
          this.timeTitle = '实际离开时间'
          break;
        case 'etd':
          this.timeTitle = '实际抵达时间'
          break;
      }
      this.showTime = true
    },
    // 获取船段值
    getDestinationHarbors() {
      $export.getDestinationHarbors()
             .then(res => {
               this.transData = res.data
             })
             .catch(err => console.log(err))
    },
    // 解决select ios不弹键盘问题
    cancalReadOnly(onOff) {
      this.$nextTick(() => {
        if(!onOff) {
          const Selects = this.$refs
          if (Selects.agentSelect) {
            const input = Selects.agentSelect.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }
          if (Selects.agent1Select) {
            const appinput = Selects.agent1Select.$el.querySelector('.el-input__inner')
            appinput.removeAttribute('readonly')
          }
          if (Selects.agent2Select) {
            const gameinput = Selects.agent2Select.$el.querySelector('.el-input__inner')
            gameinput.removeAttribute('readonly')
          }
        }
      })
    },
    // 解决ios页面上移动问题
    handleFocus() {
      document.querySelector('.content').scrollTop = 0
    }
  },
  created() {
    if (Object.keys(this.item).length !== 0) {
      this.times.sta = this.item.sta ? this.item.sta.substring(0,16) : ''
      this.times.std = this.item.std ? this.item.std.substring(0,16) : ''
      this.times.eta = this.item.eta ? this.item.eta.substring(0,16) : ''
      this.times.etd = this.item.etd ? this.item.etd.substring(0,16) : ''
      this.formLabelAlign = {
        departure: this.item.departure, // 起运
        destination: this.item.destination, // 目的
        transportTool: this.item.transportTool, // 运输工具
        transportWay: this.item.transportWay // 运输方式
      }
    }
    this.getDestinationHarbors()
  }
}
</script>

<style scoped>
/deep/.dialog-footer {
  display: flex;
}
/deep/.el-button {
  flex: 1;
  padding: 3.333vw 14.222vw;
}
/deep/.el-dialog__body {
  padding: 10px;
}
/deep/.el-form-item {
  margin-bottom: 5px;
}
/deep/.el-form-item__label {
  padding: 0;
  font-weight: bold;
}
/deep/.el-dialog {
  margin-top:5vh!important;
  border-radius: 5px;
  height: 1303px !important;
}
/deep/.el-dialog__close {
  display: none;
}
/deep/.el-dialog__header {
  padding: 10px;
  font-weight: bold;
  border-bottom: 1px solid #f1f1f1;
}
/deep/.el-select {
  width: 100%
}
/deep/.el-dialog__wrapper {
  scroll: no;
  overflow: hidden;
  height: 1303px !important;
  z-index: 3000 !important;
}
/* 修改按钮长度 */
/deep/.time .el-button {
  width: 100%;
  padding-top: 2.333vw !important;
  padding-bottom: 2.333vw !important;
}
/* 时间选择器 */
.select-time {
  position: absolute;
  width: 100%;
  left: 0;
  top: 28%;
}
/* Content */
.content {
  height: calc(89vh - 45px - 70px);
  overflow-y: scroll;
}
</style>
